// import { PageContainer, ProBreadcrumb, ProLayout } from '@ant-design/pro-layout';
import { Col, ConfigProvider, Row } from 'antd';
import { Layout } from 'antd';
import NetworkElementTree from '@/components/NetworkElementTree';
import OperationPanel from '@/components/OperationPanel';
// import NetworkDetails from '@/components/NetworkDetails';
import en_US from 'antd/locale/en_US'

const { Header, Content } = Layout;
export default function AppLayout() {

  const contentStyle: React.CSSProperties = {
    height: '100%',
    lineHeight: '120px',
    color: '#fff',
    // backgroundColor: '#108ee9',
    overflow: 'hidden'
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          // Seed Token，影响范围大
          // colorPrimary: '#00b96b',
          borderRadius: 0,

          // 派生变量，影响范围小
          // colorBgContainer: '#f6ffed',
        },
      }}
      locale={en_US}
    >
      <Layout style={{ height: '100%' }}>
        <Header style={{ display: 'flex', alignItems: 'center', height: 36, lineHeight: 36, color: '#fff', paddingLeft: 20 }}>
          <div className="demo-logo" >Network Miner</div>
        </Header>
        <Content style={contentStyle}>
          <Row style={{ height: '100%' }}>
            <Col span={3} style={{ height: '100%' }}>
              <NetworkElementTree />
            </Col>
            <Col span={21}>
              <OperationPanel/>
            </Col>
          </Row>
        </Content>
      </Layout>
    </ConfigProvider>
  );
}